<script setup>
import {ref} from "vue";
import axios from "../../util/axios.js";

const imagesData = ref([])
const handler = defineEmits(["handler"])

const props = defineProps({
  projectName:{
    type: String,
    required: true
  }
})

const changePage = (imageName) => {
  handler("handler", "image", imageName.split("/")[1])
}

/**
 * 时间格式化器
 * @param row
 * @param column
 * @param cellValue
 * @param index
 * @returns {string}
 */
const timeFormatter = (row, column, cellValue, index) => {
  return cellValue.replace('T', ' ').substring(0, 19)
}

axios.get("/harbor/images/list?projectName=" + props.projectName).then(res => {
  console.log(res.data)
  imagesData.value = res.data
})
</script>

<template>
  <el-table :data="imagesData" border class="table" style="width: 100%">
    <el-table-column prop="name" label="镜像名称" />
    <el-table-column prop="artifact_count" label="Artifacts" />
    <el-table-column prop="pull_count" label="下载数量" />
    <el-table-column prop="update_time" label="最新变更" :formatter="timeFormatter" />
    <el-table-column prop="name" label="操作" >
      <template #default="{row}">
        <el-button type="primary" size="small" @click="changePage(row.name)" class="project-button">
          查看Artifacts
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.table, .table *,
.el-table th.el-table__cell,
el-table--border, el-table--border * {
  background-color: #00364d !important;
  color: #ffffff;
  border-color: #002222 !important;
}

.el-table__inner-wrapper:before,
.el-table--fit .el-table__inner-wrapper:before {
  background-color: #00364d !important;
}

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom-color: #00364d !important;
}

.project-button * {
  color: #4aaed9 !important;
}
</style>